import { WeaTools } from 'ecCom';
import _ from 'lodash';
import window from '../../util';
/**
 *网页加水印 svg 方式
 *
 * @export
 * @param {*} [{
 *   content = '栾俊超',
 *   width = '300px',
 *   height = '200px',
 *   opacity = '0.2',
 *   fontSize = '20px',
 *   zIndex = 1000
 * }={}]
 */
export function __waterDocumentSvg({
  content = '栾俊超',
  width = '300px',
  height = '180px',
  opacity = '0.5',
  fontSize = '14px',
  fontFamily = '微软雅黑',
  color = '#ccc',
  zIndex = 1000
} = {}) {
  const isIe = isIE();
  let svgStr: string = "";
  if (!isIe) {
    svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
    <g>
       <foreignObject width='100%' height='100%'>
       <div xmlns='http://www.w3.org/1999/xhtml' 
         style="font-size: ${fontSize}; font-family:${fontFamily};color:${color};opacity:${opacity};
         transform: rotate(-31deg) translate(-6px,35px);
         -ms-transform: rotate(-31deg) translate(-6px,35px);
         -moz-transform: rotate(-31deg) translate(-6px,35px);
         -webkit-transform: rotate(-31deg) translate(-6px,35px);
         -o-transform: rotate(-31deg) translate(-6px,35px);"
       >
       ${content}
       </div>
       </foreignObject>
     </g>
   </svg>`;
  } else {
    const teSre = CreateText(content, color, opacity, fontSize, fontFamily);
    svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${teSre}</svg>`;
  }
  const base64Url = `data:image/svg+xml;base64,${WeaTools.Base64.encode(svgStr)}`;

  return base64Url;
}

export const CreateText=(contextStr = "系统管理员 <br/><br/>2019-01-22  13:54:03", color, opacity, fontSize, fontFamily)=> {
  const strArr = _.compact(contextStr.split("<br/>"));
  let textArr: string = "";
  strArr && _.forEach(strArr, (value, index) => {
    textArr += `<text x="40%" y="${50 + 5 * index}" dy="${12 + 13 * index}px"
    text-anchor="middle"
    stroke="${color}"
    stroke-width="1"
    stroke-opacity="${opacity}"
    fill="none"
    transform="rotate(-25, 120 120)"
    style="font-size: ${fontSize};font-family:${fontFamily};">
    ${value}
  </text>`;
  })
  return textArr;
}

export const isIE=() =>{
  if (!!window.ActiveXObject || "ActiveXObject" in window) {
    return true;
  } else {
    return false;
  }
} 